<template>
	<view class="root">
		<view class="top">
			<view class="left">
				<image class="avater" src="../../static/logo.png" mode="aspectFill"></image>
				<view class="ma">
					<view class="name">wukuwuli</view>
					<view class="mark">
						<uni-rate v-model="mark" allowHalf touchable/>
						<text class="text">{{mark}}分</text>
					</view>
				</view>
			</view>
			<view class="right">
				<text class="text">回收中</text>
				<switch color="#00e266" :checked="swiChange" @change="switch1Change" />
			</view>
		</view>
		
		<view class="mid">
			<view class="box">
				<text>待回收</text>
				{{back}}
			</view>
			<view class="box">
				<text>已结束</text>
				{{over}}
			</view>
			<view class="box">
				<text>已完成待评价</text>
				{{finish}}
			</view>
		</view>
		
		<view class="infor">
			<view class="item">
				<text>我的信息</text>
				<uni-icons type="right" size="20"></uni-icons>
			</view>
			<view class="item">
				<text>修改密码</text>
				<uni-icons type="right" size="20"></uni-icons>
			</view>
			<view class="item">
				<text>联系平台</text>
				<uni-icons type="right" size="20"></uni-icons>
			</view>
		</view>
		
		<view class="down">
			<button>退出登录</button>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
//工作状态
const swiChange = ref(true);
//得分
const mark = ref(0);
//待回收
const back = ref(1);
//已结束
const over = ref(1);
//已完成待评价
const finish = ref(1);
//开关
function switch1Change(e){
	swiChange.value = !swiChange.value
	console.log(swiChange.value)

}
</script>

<style lang="scss" scoped>

	.root {
		.top{
			position: relative;
			height: 300rpx;
			background-color: #f1f1f1;
			display: flex;
			justify-content: space-around;
			padding-top: 70rpx;
			.avater{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
			}
			.left{
				display: flex;
				.mark{
					display: flex;
				}
			}
			.right{
				.text{
					padding-right:10rpx ;
				}
			}
		}
		.mid{
			width: 650rpx;
			height: 150rpx;
			border-radius: 30rpx;
			margin-left: 42rpx;
			padding-left: 15rpx;
			background-color: #2ec076;
			position: absolute;
			top: 230rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			.box{
				display: flex;
				flex-direction: column;
				align-items: center;
			}
		}
		.infor{
			left: 40rpx;
			position: relative;
			width: 640rpx;
			top: 150rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			// gap: 20rpx;
			
			padding: 10rpx 15rpx;
			border-radius: 10rpx;
		
			.item{
				height: 80rpx;
				width: 600rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border: 1rpx solid black;
				border-radius: 30rpx;
				padding-right: 20rpx;
				padding-left: 30rpx;
				background-color: beige;
			}
		}
		.down{
			display: flex;
			justify-content: center;
			position: relative;
			top: 400rpx;
			button{
				border-radius: 6px;
				padding: 0rpx 250rpx;
				background-color: #2ec076;
			}
		}
	}
	
	
</style>
